<template>
  <div class="comHeader">
    <header>
      <div>
        <i class="iconfont icon-erji"></i>
        <span>小小小明弟音乐</span>
      </div>
      <button>下载APP</button>
    </header>
    <nav>
      <router-link to="/"><span>推荐音乐</span></router-link >
      <router-link to="/Hot"><span>热歌版</span></router-link>
      <router-link to="/search"><span>搜索</span></router-link>
    </nav>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.comHeader {
   position: sticky;
    width: 100%;
    z-index: 100;
    top: -1px;
  header {
    height: vw(168);
    background-color: $mainColor;
    display: flex;
    padding: 0 vw(20);
    justify-content: space-between;
    align-items: center;
    div {
      color: #fff;
      i {
        font-size: vw(50);
        vertical-align: middle;
      }
      span {
        padding-left: vw(30);
        vertical-align: middle;
        font-size: vw(30);
      }
    }
    button {
      background-color: #fff;
      color: $mainColor;
      width: vw(200);
      height: vw(76);
      text-align: center;
      border-radius: vw(38);
      outline: none;
      border: none;
      font-size: vw(30);
    }
  }
  nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #f3f3f3;
    background-color: #fff;
    a {
      flex-basis: 33%;
      text-align: center;
      span {
        color: #000;
        font-size: vw(30);
        line-height: vw(76);
        display: inline-block;
        padding: 0 vw(8);
      }
      &.active {
        span {
          color: $mainColor;
          border-bottom: 2px solid $mainColor;
        }
      }
    }
  }
}
</style>